<template>
    <div>
        <div id="aaa">
            <el-collapse v-model="activeName" accordion style="padding: 25px">
                <el-collapse-item title="学生信息" name="1">
                    <!-- 添加学生按钮 -->
                    <div class="button">
                        <el-button type="success" @click="addData">添加学生</el-button>
                        <el-button type="primary" @click="addFile" style="margin-right: 10px">批量添加</el-button>
                        <a href="/api/uploadAnddownload/download">
                            <el-button type="info">下载模板</el-button>
                        </a>
                    </div>
                    <!-- el:table 表格 :data='循环的数组' -->
                    <el-table border :data="productList" stripe style="width: 100%">
                        <!-- prop='属性名' label='网页展示的标签' -->
                        <el-table-column align="center" prop="id" label="ID" width="180"></el-table-column>
                        <el-table-column align="center" prop="name" label="姓名" width="180"></el-table-column>
                        <!-- <el-table-column align="center" prop="password" label="密码"></el-table-column> -->
                        <el-table-column align="center" prop="phone" label="手机"></el-table-column>
                        <el-table-column align="center" label="班级">
                            <template scope="scope">
                                <p v-for="i in scope.row.clazzs" :key="i.id">
                                    <span v-if="i.id == $route.query.id">{{i.name}}</span>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="200">
                            <!-- 编辑按钮组 -->
                            <template slot-scope="scope">
                                <el-button type="primary" @click="handleClick(scope.row)" size="small">编辑</el-button>
                                <el-button type="danger" @click="handledelete(scope.row)" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--
                      分页功能
                      @size-change:显示行数发生改变执行的方法
                      @current-change:页数改变发生执行的方法
                      :page-sizes:可提供用户选择显示行数的选择
                      :current-page.sync:高亮显示页面
                      layout="total, sizes, prev, pager, next, jumper" :分页功能--统计,上一页,页数,下一页和跳转
                      :total:统计拥有多少条数据
                    -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 30, 40]"
                            :current-page.sync="currPage"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                    ></el-pagination>
                    <!-- 点击编辑弹出的dialog -->
                    <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
                        <el-form
                                ref="dataForm"
                                label-position="left"
                                label-width="70px"
                                style="width: 400px; margin-left:50px;"
                                v-if="isFile == false"
                        >
                            <el-form-item label="ID">
                                <el-input v-model="user.id" autocomplete="off"
                                          :disabled="isAdd == false"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="user.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="user.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="user.phone" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer" v-if="isFile == false">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="updateData()">提交</el-button>
                        </div>
                        <!-- 文件上传 -->
                        <el-upload
                                class="upload-demo"
                                action="/api/uploadAnddownload/multiUpload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :limit="1"
                                :on-success="handleSuccess"
                                :on-exceed="handleExceed"
                                accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                v-if="isFile == true"
                                :data="{clazzId:this.$route.query.id}"
                                :file-list="fileList"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
                        </el-upload>
                    </el-dialog>
                </el-collapse-item>

                <el-collapse-item title="课程信息" name="2">
                    <div class="button">
                        <el-button type="success" @click="addCourse()">添加课程</el-button>
                    </div>

                    <el-table border :data="courseList" stripe style="width: 100%">
                        <!-- prop='属性名' label='网页展示的标签' -->
                        <el-table-column align="center" prop="id" label="ID" width="clientWidth/2"></el-table-column>
                        <el-table-column align="center" prop="name" label="课程名" width="clientWidth/2"></el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="200">
                            <!-- 编辑按钮组 -->
                            <template slot-scope="scope">
                                <el-button type="danger" @click="handledeleteCourse(scope.row)" size="small">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
                        <el-form
                                ref="dataForm"
                                label-position="left"
                                label-width="150px"
                                style="width: 400px; margin-left:50px;"
                        >
                            <el-form-item label="课程名">
                                <el-select v-model="courseObject" placeholder="请选择课程">
                                    <el-option
                                            v-for="item in course"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="老师">
                                <el-select v-model="teacherObject" placeholder="请选择老师">
                                    <el-option
                                            v-for="item in teacher"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="时间范围">
                                <div class="block">
                                    <el-tooltip content="开始日期为开学日期,结束日期为课程结束日期" placement="top">
                                        <el-date-picker
                                                v-model="time"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期">
                                        </el-date-picker>
                                    </el-tooltip>
                                </div>
                            </el-form-item>
                            <el-form-item label="单双周上课">
                                <el-radio-group v-model="weeklist">
                                    <el-radio :label="1">单双周</el-radio>
                                    <el-radio :label="2">单周</el-radio>
                                    <el-radio :label="3">双周</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="星期一上课时间">
                                <div class="block">
                                    <el-checkbox-group v-model="mondaylist" class="checkbox">
                                        <el-checkbox label="1">1-2节</el-checkbox>
                                        <el-checkbox label="2">3-4节</el-checkbox>
                                        <el-checkbox label="3">5-6节</el-checkbox>
                                        <el-checkbox label="4">7-8节</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                            <el-form-item label="星期二上课时间">
                                <div class="block">
                                    <el-checkbox-group v-model="tuesdaylist" class="checkbox">
                                        <el-checkbox label="1">1-2节</el-checkbox>
                                        <el-checkbox label="2">3-4节</el-checkbox>
                                        <el-checkbox label="3">5-6节</el-checkbox>
                                        <el-checkbox label="4">7-8节</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                            <el-form-item label="星期三上课时间">
                                <div class="block">
                                    <el-checkbox-group v-model="wednesdaylist" class="checkbox">
                                        <el-checkbox label="1">1-2节</el-checkbox>
                                        <el-checkbox label="2">3-4节</el-checkbox>
                                        <el-checkbox label="3">5-6节</el-checkbox>
                                        <el-checkbox label="4">7-8节</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                            <el-form-item label="星期四上课时间">
                                <div class="block">
                                    <el-checkbox-group v-model="thursdaylist" class="checkbox">
                                        <el-checkbox label="1">1-2节</el-checkbox>
                                        <el-checkbox label="2">3-4节</el-checkbox>
                                        <el-checkbox label="3">5-6节</el-checkbox>
                                        <el-checkbox label="4">7-8节</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                            <el-form-item label="星期五上课时间">
                                <div class="block">
                                    <el-checkbox-group v-model="fridaylist" class="checkbox">
                                        <el-checkbox label="1">1-2节</el-checkbox>
                                        <el-checkbox label="2">3-4节</el-checkbox>
                                        <el-checkbox label="3">5-6节</el-checkbox>
                                        <el-checkbox label="4">7-8节</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="saveCourse()">提交</el-button>
                        </div>
                    </el-dialog>
                </el-collapse-item>


                <el-collapse-item title="老师信息" name="3">
                    <el-table border :data="teacherList" stripe style="width: 100%">
                        <!-- prop='属性名' label='网页展示的标签' -->
                        <el-table-column align="center" prop="id" label="ID" width="clientWidth/2"></el-table-column>
                        <el-table-column align="center" prop="name" label="课程名" width="clientWidth/2"></el-table-column>
                    </el-table>
                </el-collapse-item>

                <el-collapse-item title="课程表" name="4">
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%;padding: 20px">
                        <el-table-column prop="time" align="center"></el-table-column>
                        <el-table-column prop="data[0]" label="星期一" align="center">
                            <template slot-scope="scope">
                                <p>{{scope.row.data[0].courseName}}</p>
                                <p>{{scope.row.data[0].teacherName}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data[1]" label="星期二" align="center">
                            <template slot-scope="scope">
                                <p>{{scope.row.data[1].courseName}}</p>
                                <p>{{scope.row.data[1].teacherName}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data[2]" label="星期三" align="center">
                            <template slot-scope="scope">
                                <p>{{scope.row.data[2].courseName}}</p>
                                <p>{{scope.row.data[2].teacherName}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data[3]" label="星期四" align="center">
                            <template slot-scope="scope">
                                <p>{{scope.row.data[3].courseName}}</p>
                                <p>{{scope.row.data[3].teacherName}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data[4]" label="星期五" align="center">
                            <template slot-scope="scope">
                                <p>{{scope.row.data[4].courseName}}</p>
                                <p>{{scope.row.data[4].teacherName}}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row>
                        <el-button type="primary" style="float: left;margin-left: 35px" @click="previousWeek()">上一周
                        </el-button>
                        <el-button type="primary" style="margin-left: 40%" @click="now()">返回当周</el-button>
                        <el-button type="primary" style="float: right;margin-right: 35px" @click="nextWeek()">下一周
                        </el-button>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "List",
        data() {
            return {
                productList: [],
                courseList: [],
                teacherList: [],
                course: [],
                teacher: [],
                pos: 0, //坐标
                pageSize: 10, //每一页显示的数据条数
                total: 150, //记录总数
                maxPage: 99, //最大页数
                currPage: 1, //当前页
                dialogFormVisible: false, //dialog框是否显示
                isAdd: false, //判断是否为添加方法或者更新方法
                isFile: false,  //判断是否为上传文件方法
                //双向绑定学生信息
                user: {
                    id: "",
                    name: "",
                    password: "",
                    phone: ""
                },
                id: "",
                clientWidth: 0,
                activeName: "4",
                isAddCourse: false,
                courseObject: "",
                teacherObject: "",
                fileList: [],
                clazzId: this.$route.query.id,
                weeklist: 1,
                time: '',
                mondaylist: [],
                tuesdaylist: [],
                wednesdaylist: [],
                thursdaylist: [],
                fridaylist: [],
                tableData: [
                    {
                        time: "1-2节",
                        data: []
                    }, {
                        time: "2-3节",
                        data: []
                    }, {
                        time: "4-5节",
                        data: []
                    }, {
                        time: "5-6节",
                        data: []
                    }
                ],
                num: 0
            };
        },
        components: {},
        methods: {
            //分页显示行数发生改变
            handleSizeChange(pageSizes) {
                //每一页显示的数据条数
                this.pageSize = pageSizes;
                //从新加载数据
                this.pageHandler(0);
            },
            //分页页数发生改变
            handleCurrentChange(currentPage) {
                this.currPage = currentPage;
                //改变数据
                this.pageHandler((this.currPage - 1) * this.pageSize);
                this.timetable(0);
            },
            //删除学生事件
            handledelete(row) {
                //使用 axios 调用后台接口
                let url =
                    "/api/clazz/deletestudent?clazzId=" + this.$route.query.id + "&studentId=" + row.id
                axios
                    .delete(url)
                    .then(res => {
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.timetable(0);
                        this.$message("更新成功!");
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error('错了哦，请重新操作')
                    });
            },
            handledeleteCourse(row) {
                //使用 axios 调用后台接口
                let url =
                    "/api/clazz/deletecourse?clazzId=" + this.$route.query.id + "&courseId=" + row.id
                axios
                    .delete(url)
                    .then(res => {
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.timetable(0);
                        this.$message("更新成功!");
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error('错了哦，请重新操作')
                    });
            },
            //编辑学生事件
            handleClick(row) {
                //因为是更新用户所以参数为false
                this.isAdd = false;
                this.isFile = false;
                //让dialog显示
                this.dialogFormVisible = true;
                //动态获取学生信息
                this.user.id = row.id;
                this.user.name = row.name;
                this.user.password = "";
                this.user.phone = row.phone;
            },
            //pagehandler方法 跳转到坐标
            pageHandler(pos) {
                //防止传入坐标错误,进行修改
                if (pos <= 0) {
                    pos = 0;
                }
                if (pos >= this.total) {
                    if (this.total % this.pageSize == 0) {
                        pos = this.total - this.pageSize;
                    } else {
                        pos = this.total - (this.total % this.pageSize);
                    }
                }
                this.pos = pos;
                //使用 axios 调用后台接口
                let url =
                    "/api/clazz?clazzId=" +
                    this.$route.query.id +
                    "&pos=" +
                    this.pos +
                    "&rows=" +
                    this.pageSize;
                axios
                    .get(url)
                    .then(res => {
                        //将数据绑定对应属性中
                        this.productList = res.data.list[0].students;
                        this.teacherList = res.data.list[0].teachers;
                        this.courseList = res.data.list[0].courses;
                        this.total = parseInt(res.data.list[0].count);
                        //设置最大页数,向下取整
                        this.maxPage = Math.ceil(this.total / this.pageSize);
                    })
                    .catch(err => {
                        console.log("error");
                    });
            },
            //更新和添加公用同一个方法
            updateData() {
                //判断是否添加方法,否则进入更新方法
                if (this.user.id == "")
                    return this.$message.error('用户ID不能为空，请重新操作');
                if (this.user.name == "")
                    return this.$message.error('用户名不能为空，请重新操作');
                if (this.user.password == "") {
                    this.$message('默认密码用用户ID');
                    this.user.password = this.user.id
                }
                if (this.isAdd == false) {
                    let url = "/api/student"; //?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios
                        .put(url, {
                            id: this.user.id,
                            name: this.user.name,
                            password: this.user.password,
                            phone: this.user.phone
                        })
                        .then(res => {
                            this.dialogFormVisible = false;
                            this.currPage = 1;
                            this.handleCurrentChange(1);
                            this.timetable(0);
                            this.$message("更新成功!");
                        })
                        .catch(err => {
                            this.$message.error('错了哦，请重新操作')
                            console.log(err);
                        });
                }
                    if (this.isAdd == true) {
                    if (this.user.id == "")
                        return this.$message.error('用户ID不能为空，请重新操作');
                    if (this.user.name == "")
                        return this.$message.error('用户名不能为空，请重新操作');
                    if (this.user.password == "") {
                        this.$message('默认密码用用户ID');
                        this.user.password = this.user.id
                    }
                    let url = "/api/student/addbyclazz?clazzId=" + this.$route.query.id; //?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios
                        .post(url, {
                            id: this.user.id,
                            name: this.user.name,
                            password: this.user.password,
                            phone: this.user.phone
                        })
                        .then(res => {
                            this.dialogFormVisible = false;
                            this.currPage = 1;
                            this.handleCurrentChange(1);
                            this.timetable(0);
                            this.$message("更新成功!");
                        })
                        .catch(err => {
                            this.$message.error('错了哦，请重新操作')
                            console.log(err);
                        });
                }
            },
            //添加学生方法
            addData() {
                this.isAdd = true;
                this.isFile = false;
                this.isAddCourse = false;
                this.dialogFormVisible = true;
                this.user.id = "";
                this.user.name = "";
                this.user.password = "";
                this.user.phone = "";
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            },
            addCourse() {
                this.isAddCourse = true;
                this.dialogFormVisible = true;
                let url = "/api/course?pos=0&rows=0";
                axios
                    .get(url)
                    .then(res => {
                        this.course = res.data.list;
                        this.timetable(0);
                    })
                    .catch(err => {
                        this.$message.error('错了哦，请重新操作');
                        console.log(err);
                    });
                url = "/api/teacher?pos=0&rows=0";
                axios
                    .get(url)
                    .then(res => {
                        this.teacher = res.data.list;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            saveCourse() {
                if (this.time[0] == null || this.time[1] == null || this.weeklist == null) return this.$message.error('错了哦，请重新操作');
                if (this.mondaylist.length == 0 && this.tuesdaylist.length == 0 && this.wednesdaylist.length == 0 && this.thursdaylist.length == 0 && this.fridaylist.length == 0) return this.$message.error('错了哦，请重新操作');
                let url = "/api/serialpk/addmore"
                axios
                    .post(url, {
                        beginTime: this.time[0],
                        endTime: this.time[1],
                        clazzId: this.$route.query.id,
                        courseId: this.courseObject,
                        teacherId: this.teacherObject,
                        getDay: [this.mondaylist, this.tuesdaylist, this.wednesdaylist, this.thursdaylist, this.fridaylist],
                        week: this.weeklist
                    })
                    .then(res => {
                        console.log(res.data.result)
                        if(res.data.result != "OK"){
                            this.$message.error(res.data.result);
                        }else {
                            this.dialogFormVisible = false;
                            this.currPage = 1;
                            this.handleCurrentChange(1);
                            this.timetable(0);
                            this.$message("更新成功!");
                        }
                    })
                    .catch(err => {
                        this.$message.error('错了哦，请重新操作');
                        console.log(err);
                    });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            //上传文件
            addFile() {
                this.dialogFormVisible = true;
                this.isFile = true;
            },
            handleSuccess(response) {
                this.pageHandler(0);
                this.timetable(0);
            },
            timetable(num) {
                this.week = 0;
                //使用 axios 调用后台接口
                let url =
                    "/api/timetable/clazztimetable?clazzId=" + this.$route.query.id + "&date=" + num
                axios
                    .get(url)
                    .then(res => {
                        console.log(res.data)
                        this.tableData[0].data = []
                        this.tableData[1].data = []
                        this.tableData[2].data = []
                        this.tableData[3].data = []
                        for (let i = 0; i < 20; i += 4) {
                            this.tableData[0].data.push(res.data[i])
                            this.tableData[1].data.push(res.data[i + 1])
                            this.tableData[2].data.push(res.data[i + 2])
                            this.tableData[3].data.push(res.data[i + 3])
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            previousWeek() {
                this.num = this.num - 1
                this.timetable(this.num)
            },
            nextWeek() {
                this.num = this.num + 1
                this.timetable(this.num)
            },
            now() {
                this.num = 0;
                this.timetable(0);
            }
        },
        created() {
            //created  表示页面加载完毕，立即执行
            this.pageHandler(0);
            this.timetable(0);
            this.clientWidth = document.body.clientWidth;
        }
    };
</script>

<style lang="scss" scoped>
    #aaa {
        width: 100%;
        height: 1000px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top: 10px;
        left: 0px;
        z-index: 9999999;
        overflow-x: hidden;
    }

    .button {
        padding-bottom: 20px;
    }

    .checkbox {
        width: 350px;
    }
</style>
